<template>
  <div class="middleData">
    <div class="titles-text">
      <span>7天活跃用户数据</span>
      <span>{{total}}</span>
    </div>
    <div class="charts1">
      <dv-charts :option="option1" />
    </div>
    <div class="charts2">
      <dv-charts :option="option2" />
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "middleData",
  data() {
    return {
      option1: {},
      option2: {},
      total: 0
    };
  },
  methods: {
    //获取总数
    getTotal() {
      this.axios
        .get(apis.queryActiveUserTotal, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          //此处要使用箭头函数，this指向才正确
          this.total = res.data.result;
        })
        .catch(function(error) {
          alert(error);
        });
    },

    //资讯app每日访问
    getEveryDayView() {
      this.axios
        .get(apis.queryEveryDayViewZX, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          const smooth = res.data.result.value.length>=3;
          //此处要使用箭头函数，this指向才正确
          this.option2 = {
            grid: {
              left: "15%",
              right: "10%",
              top: "20%",
              bottom: "20%"
            },
            legend: {
              orient: "horizontal",
              right: 60,
              top: 20,
              textStyle: {
                fontSize: 13,
                fill: "#fff"
              },
              data: [{ name: "访问", color: "#3A5FFB" }]
            },

            xAxis: {
              data: res.data.result.date,
              axisLabel: {
                style: {
                  fill: "#546899",
                  fontSize: 13
                }
              },
              axisLine: {
                style: {
                  stroke: "#0A2F6B",
                  lineWidth: 1
                }
              },
              splitLine: {
                show: true,
                style: {
                  stroke: "#0A2F6B",
                  lineWidth: 1
                }
              }
            },
            yAxis: {
              data: "value",
              min: 0,
              axisLabel: {
                style: {
                  fill: "#546899",
                  fontSize: 13
                }
              },
              axisLine: {
                style: {
                  stroke: "#0A2F6B",
                  lineWidth: 1
                }
              },
              splitLine: {
                show: true,
                style: {
                  stroke: "#0A2F6B",
                  lineWidth: 1
                }
              }
            },

            series: [
              {
                name: "访问",
                data: res.data.result.value,
                type: "line",
                smooth: smooth,
                linePoint: {
                  style: {
                    fill: "#3A5FFB",
                    lineWidth: 1
                  }
                },
                lineStyle: {
                  stroke: "#3A5FFB"
                },
                lineArea: {
                  show: true,
                  gradient: ["#3A5FFB", "#051D58"]
                }
              }
            ]
          };
        })
        .catch(function(error) {
          alert(error);
        });
    },

    //获取分时活跃用户
    getEveryDayUser() {
      this.axios
        .get(apis.queryActiveUserEveryDay, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          this.option1 = {
            grid: {
              left: "15%",
              right: "10%",
              top: "20%",
              bottom: "20%"
            },
            xAxis: {
              data: res.data.result.date,
              axisLabel: {
                style: {
                  fill: "#687AAB",
                  fontSize: 13
                }
              },
              axisLine: {
                style: {
                  stroke: "#133973",
                  lineWidth: 1
                }
              }
            },
            yAxis: {
              data: "value",
              min: 0,
              axisLabel: {
                style: {
                  fill: "#687AAB",
                  fontSize: 13
                }
              },
              axisLine: {
                style: {
                  stroke: "#133973",
                  lineWidth: 1
                }
              },
              splitLine: {
                show: false
              }
            },
            series: [
              {
                data: res.data.result.value,
                type: "bar",
                barWidth: 17.2
              }
            ],
            color: ["#3B5FFB"]
          };
        })
        .catch(function(error) {
          alert(error);
        });
    },

    createData() {
      this.getTotal();
      this.getEveryDayUser();
      this.getEveryDayView();
    }
  },
  mounted() {
    this.createData();
  }
};
</script>
<style lang="less">
.middleData {
  padding: 50px 30px 15px;
  width: 100%;
  height: 617px;
  position: relative;
  background: url(../assets/img/border3-1.gif) no-repeat center center / 100%
    100%;
  .titles-h3 {
    margin-bottom: 0;
    flex: 1;
  }
  .titles-text {
    position: absolute;
    top: 75px;
    right: 74px;
    font-size: 13px;
    color: #CAF2F5;
    span:first-child {
      margin-right: 10px;
    }
    span:last-child {
      font-size: 13px;
      margin-right: 10px;
    }
  }
}
.charts1,
.charts2 {
  width: 100%;
  height: 45%;
  margin-bottom: 20px;
}
</style>
